<template>
	<el-row style="min-height:100vh;background-color: #818cf8;">
		<el-col :lg="16" :md="12" class="left-center">
			<div>
				<div class="font">飞天商城</div>
				<div class="text-gray">计应G2302《前端企业级开发框架》课程实战项目</div>
			</div>
		</el-col>
		<el-col :lg="8" :md="12" class="left-center1">
			<h2 class="font1">欢迎回来</h2>
			<div class="font2">
				<span class="font3"></span>
				<span>账号密码登录</span>
				<span class="font3"></span>
			</div>
			<el-form ref="formRef" :rules="rules" :model="form" class="w-">
				<el-form-item prop="username">
					<el-input v-model="form.username" placeholder="请输入用户名">
						<template #prefix>
							<el-icon>
								<User />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="form.password" placeholder="请输入密码" show-password>
						<template #prefix>
							<el-icon>
								<Lock />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" class="w-round" :loading="loading">登录</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		toast
	} from '~/composables/util'
	import {
		useRouter
	} from 'vue-router'
	import {
		useStore
	} from 'vuex'
	import {
		setToken
	} from '~/composables/auth'
	const store = useStore()
	const router = useRouter()

	const form = reactive({
		username: "",
		password: ""
	})

	const rules = {
		username: [{
			required: true,
			message: '用户名不能为空！',
			trigger: 'blur'
		}],
		password: [{
			required: true,
			message: '密码不能为空！',
			trigger: 'blur'
		}]
	}

	const formRef = ref(null)
	const loading = ref(false)
	const onSubmit = () => {
		formRef.value.validate((valid) => {
			if (!valid) {
				return false;
			}
			loading.value = true
			store.dispatch("login", form).then(res => {
				toast("登录成功")
				router.push("/")
			}).finally(() => {
				loading.value = false
			})
		})
	}

	//监听回车事件
	function onkeyUp(e) {
		if (e.key == "Enter") onSubmit()
	}

	//添加键盘监听
	onMounted(() => {
		document.addEventListener("keyup", onkeyUp)
	})
	//移除键盘监听
	onBeforeUnmount(() => {
		document.addEventListener("keyup", onkeyUp)
	})
</script>

<style scoped>
	.left-center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.left-center1 {
		background-color: white;
		background-color: #fafafa;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.font {
		font-weight: bold;
		font-size: 48px;
		color: #f9fafb;
		margin-bottom: 10px;
	}

	.text-gray {
		color: #e5e7eb;
		font-size: 0.875rem;
		line-height: 1.25rem;
	}

	.font1 {
		font-weight: bold;
		font-size: 36px;
		color: #1f2937;
	}

	.font2 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 1.25rem;
		margin-bottom: 1.25rem;
		color: #d1d5db;
		margin-left: 0.5rem;
	}

	.font3 {
		height: 1px;
		width: 4rem;
		background-color: #e5e7eb;
	}

	.w- {
		width: 250px;
	}

	.w-round {
		width: 250px;
		background-color: #626aef;
		border-radius: 50%;
		color: white;
		padding: 0 25px;
	}

	@media (max-width: 991px) {
		.font {
			font-size: 36px;
		}

		.font1 {
			font-size: 24px;
		}

		.left-center,
		.left-center1 {
			padding: 10px;
		}

		.font2 {
			margin-top: 1rem;
			margin-bottom: 1rem;
		}

		.w-round {
			border-radius: 8px;
		}
	}
</style>